<template>
    <div class="body">
        <div class="nav">
            <div class="show">
                <div :id="[data.isType == true ? 'style1' : 'style2']" @click="all">活动列表</div>
                <div :id="[data.isType2 == true ? 'style1' : 'style2']" @click="shelves">添加特价商品</div>
            </div>
        </div>
        <div v-if="data.isTable === true" class="table">
            <el-table :data="tablePage" style="width: 100% ;color:#438ACA"
                :header-cell-style="{ background: '#438ACA', color: '#fff' }">
                <el-table-column prop="good_Number" label="商品编号" align="center" />
                <el-table-column prop="good_Name" label="商品名称" align="center" />
                <el-table-column prop="good_ShangPinJiaGe,good_DuiHuanJiFen" label="单价/积分" align="center">
                    <template v-slot="scope">
                        {{ scope.row.good_ShangPinJiaGe }}/{{ scope.row.good_DuiHuanJiFen }}
                    </template>
                </el-table-column>
                <el-table-column prop="good_KuChun" label="库存" align="center" />
                <el-table-column prop="good_ZhuangTai" label="状态" align="center">
                    <template v-slot="scope">
                        <el-button size="small" style="background:#32AF9B;color:#fff"
                            v-if="scope.row.good_ZhuangTai == 1" @click="goodType(scope.row)">上架
                        </el-button>
                        <el-button size="small" style="background:#AAAAAA;color:#000"
                            v-if="scope.row.good_ZhuangTai == 0" @click="goodType(scope.row)">下架
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button @click="update(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div>共<span>{{ pageMax }}</span>页/<span>{{ data.data.length }}</span>条数据</div>
                <el-pagination layout=" prev, pager, next" :page-count="pageMax" :current-page="data.page" background
                    @current-change="clickPage">
                </el-pagination>
                <div>跳至<input class="ent" type="text" v-model="data.page" :chenge="ent(data.page)">页
                </div>
            </div>
        </div>
        <div v-if="data.isTable === false">
            <el-form>
                <el-form-item label="*选择商品:">
                    <el-select v-model="data.form.value" filterable remote reserve-keyword placeholder="搜索商品编号或商品编号"
                        :remote-method="remoteMethod" :loading="loading" @keyup.enter="open">
                        <el-option v-for="item in options" :key="item.id" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品信息:">
                    <div class="red" v-if="data.a == true">
                        {{`商品编号：${data.selectData[0].bianHao},${data.selectData[0].value},商品售价及积分${data.selectData[0].shouJia}元/${data.selectData[0].jiFen}积分,商品库存${data.selectData[0].kuChun}`}}
                    </div>
                </el-form-item>
                <el-form-item label="*促销库存：">
                    <el-input v-model="data.form.kucun" placeholder="促销库存量不得高于商品库存" /><span>总库存:{{data.kuchun}}</span>
                </el-form-item>
                <el-form-item label="*活动时间：">
                    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="data.form.date" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage,ElMessageBox } from 'element-plus'
const data = reactive({
    data: [],//总数据
    tableData: '',//重定位数据
    page: 1,//当前页码
    isType: true,//class类型1
    isType2: false,//class类型2
    isTable: true,//两个页面切换
    selectData: [],
    a: false,
    kuchun:'',
    form: {
        id:'',
        value: '',
        kucun: '',
        date: ''
    },
})
//初始请求数据
axios({
    url:'http://localhost:3001/Special',
    method:'get'
}).then((res)=>{
    if(res.data.code == 200){
        data.data = res.data.data
    }else{
        ElMessage({
            message: '服务器获取信息异常',
            grouping: true,
            type: 'warning',
            center: true,
            })
    }
}).catch((err)=>{
    ElMessage({
        message: '数据库访问出错,请稍后再试',
        grouping: true,
        type: 'warning',
        center: true,
    })
})
//点击翻页
const clickPage = (num) => { 
    data.page = num
}
//分页显示多少数据
const tablePage = computed(() => {
    let nowPage = (data.page - 1) * 10;
    return data.data.slice(nowPage, nowPage + 10)
})
//最大页码
const pageMax = computed(() => {
    return Math.ceil(data.data.length / 10);
})
//跳转至某页
const ent = (page) => {
    data.page = parseInt(page)
}
//上下架
const goodType = (type) => {   
    axios({
        url:'http://localhost:3001/goodsType',
        method:'post',
        data:{
            id:type.Id,
            good_ZhuangTai:type.good_ZhuangTai
        }
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '更改商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            all()
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    }) 
}
//所有数据
const all = () => {
    axios({
        url:'http://localhost:3001/Special',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '加载特价商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            data.isType = true
            data.isType2 = false
            data.isTable = true
            data.data = res.data.data
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
//筛选
const list = ref([])
const options = ref([])
const value = ref([])
const loading = ref(false)
onMounted(() => {
    axios({
        url:'http://localhost:3001/allGoods',
        method:'get'
    }).then((res)=>{
        list.value = res.data.data.map((item) => {
            return {id:item.Id, value: item.good_Name, label: item.good_Name, bianHao: item.good_Number, shouJia: item.good_ShangPinJiaGe,shiJia:item.good_ShiChangJiaGe,  kuChun: item.good_KuChun,jiFen: item.good_DuiHuanJiFen,huoDong:item.good_HuoDong,KaiShi:item.good_HuoDongKaiShiTime,JieShu:item.good_HuoDongJieShuTime }
        })
    })
})
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options.value = list.value.filter((item) => {
                return item.label.indexOf(query) != -1 || item.bianHao.indexOf(query) != -1
            })
        }, 200)
    } else {
        options.value = []
    }

}
const open = () => {
    for (let i = 0; i < options.value.length; i++) {
        if (options.value[i].value == data.form.value) {
            data.selectData.push(options.value[i])
            data.kuchun = data.selectData[i].kuChun
            data.a = true
            return
        }
    }
}
//清除提交内容
const clearFrom = ()=>{
    data.selectData = [],
    data.form = {
        id:'',
        value: '',
        kucun: '',
        date: ''
    }    
}
//添加
const shelves = () => {
    data.isType = false
    data.isType2 = true
    data.isTable = false
}
//编辑
const update = (all) => {
    ElMessageBox.confirm(
    '是否将该商品移出特价?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios({
            url:'http://localhost:3001/DelSpecial',
            method:'post',
            data:{
                Id:all.Id,
                kuChun:parseInt(all.good_KuChun) + parseInt(all.good_HuoDongKuChun),
            }
        }).then((res)=>{
            if(res.data.code == 200){
                ElMessage({
                    type: 'success',
                    message: '成功将该商品移出特价',
                })
                data.isTable = true
                all()
            }else{
                ElMessage({
                    message: '移出特价失败',
                    grouping: true,
                    type: 'warning',
                    center: true,
                })
                data.isTable = true
                all()
            }
        }).catch((err)=>{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        })
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })
 }
 //添加提交
const onSubmit = () => {
    if(data.selectData[0].huoDong != 2){
        axios({
            url:'http://localhost:3001/AddSpecial',
            method:'post',
            data:{
                Id:data.selectData[0].id,
                kuChun:parseInt(data.kuchun) - parseInt(data.form.kucun),
                HuoDongKuChun:parseInt(data.form.kucun),
                KaiShiTime:data.form.date[0],
                JieShuTime:data.form.date[1]
            }
        }).then((res)=>{
            if(res.data.code == 200){
                ElMessage({
                    message: '新增特价商品信息成功',
                    grouping: true,
                    type: 'success',
                    center: true,
                })
                clearFrom()
                data.isType = true
                data.isType2 = false
                data.isTable = true
                all()
            }else{
                ElMessage({
                    message: '新增特价商品信息失败,请核对*号必选项是否填充',
                    grouping: true,
                    type: 'warning',
                    center: true,
                })
                clearFrom()
            }
        }).catch((err)=>{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
            clearFrom()
        })
    }else{
        ElMessage({
            message: '该商品已参与活动',
            grouping: true,
            type: 'warning',
            center: true,
        })
        clearFrom()
    }
}
</script>

<style lang="less" scoped>
.body {
    font-size: 10px;
    padding: 1rem;
    background: #fff;
}

#style1 {
    background: #fff;
    color: #000;
}

#style2 {
    background: #333333;
    color: #c9c3bc;
}

.nav {
    background: #333333;
    color: #c9c3bc;
    font-size: 0.8rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;

    .show {
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
        flex-direction: row;
        height: 2.5rem;
        line-height: 2.5rem;

        div {
            height: 100%;
            padding: 0 2rem;
            cursor: pointer;
        }
    }
}

.table {
    .el-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;

        span {
            color: red
        }

        .ent {
            margin: 0 1rem;
            width: 0.9rem;
            height: 0.9rem;
            padding: 0.5rem;
            border: 1px solid #e3e3e3;
            border-radius: 2px;
        }
    }
}

.red {
    padding: 0 2rem;
    color: red;
}
</style>